<%@ page language="java" contentType="text/html; charset=UTF-8"
	pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>商品主类型</title>
<!-- 引入layui样式和脚本 -->
<link rel="stylesheet" href="layui/css/layui.css">
<script src="layui/layui.js"></script>
</head>
<body>
	<!--修改表单  -->
	<form class="layui-form" action="" style="display: none"
		id="updateFormTu" lay-filter="updateFormTu">
		<div class="layui-form-item">
			<label class="layui-form-label">proId</label>
			<div class="layui-input-block">
				<input type="text" name="proId" required lay-verify="required"
					autocomplete="off" class="layui-input" layui-disabled disabled>
			</div>
		</div>
		<div class="layui-form-item">
			<label class="layui-form-label">推荐位置</label>
			<div class="layui-input-inline" style="width: 100px;">
				<select name="posiId" class="posiId">
					<option value=""></option>
				</select>
			</div>
		</div>
		<div class="layui-form-item">
			<div class="layui-input-block">
				<button class="layui-btn" lay-submit lay-filter="updateformDemoTu">立即提交</button>
				<button type="reset" class="layui-btn layui-btn-primary">重置</button>
			</div>
		</div>
	</form>
	<!--详情表单结束  -->
	<!-- 表格容器 -->
	<table id="demo" lay-filter="test"></table>
	<!-- 行内工具栏开始 -->
	<script type="text/html" id="toolbarDemo2">
          <div class="layui-btn-container">
            {{#  if(d.posiId != 5){ }}
            <button class="layui-btn layui-btn-sm" lay-event="update"><i class="layui-icon">&#xe642;</i>编辑</button>
            <button class="layui-btn layui-btn-sm" lay-event="cha"><i class="layui-icon">&#xe642;</i>产品详情</button>
            {{# } }}

          </div>
     </script>
     <script type="text/html" id="barDemo2">
  <a class="layui-btn layui-btn-mini" lay-event="editTu">编辑</a>
</script>
	<!-- 行内工具栏结束 -->
<div id="updCha" style="display: none; width: 1000">
		<table id="demo2" lay-filter="chatab"></table>
</div>
	<!-- 修改的表单开始 -->
	<div id="updDiv" style="display: none; width: 1000" >
		<form class="layui-form" style="width: 350px;"   lay-filter="updForm">
			<div class="layui-form-item">
				<label class="layui-form-label">位置id</label>
				<div class="layui-input-inline">
					<input type="text" name="posiId" required lay-verify="required"
						placeholder="请输入标题" autocomplete="off" class="layui-input"
						layui-disabled disabled>
				</div>
			</div>
			<div class="layui-form-item">
				<label class="layui-form-label">位置名称</label>
				<div class="layui-input-inline">
					<input type="text" name="posiName" required
						lay-verify="required" placeholder="请输入标题" autocomplete="off"
						class="layui-input">
				</div>
			</div>

			<div class="layui-form-item">
				<div class="layui-input-block">
					<button class="layui-btn" lay-submit lay-filter="formDemo2">立即提交</button>
					<button type="reset" class="layui-btn layui-btn-primary">重置</button>
				</div>
			</div>
		</form>
	</div>
	<!-- 修改的表单结束 -->


	<script>
		layui.use([ 'table', 'form', 'layer', 'upload' ], function() {
			var table = layui.table;
			var form = layui.form;
			var layer = layui.layer;
			var upload = layui.upload;
			var $ = layui.$;

			//第一个实例
			table.render({
				elem : '#demo',
				url : 'getList',//数据接口
				page : true,//开启分页
				id : "idTest",
				toolbar : '#toolbarDemo1',
				cols : [ [ //表头
				{
					field : 'posiId',
					title : '位置id',
					width : 80,
					sort : true,
					fixed : 'left'
				}, {
					field : 'posiName',
					title : '位置名称',
					width : 130
				}, {
					title : '操作',
					width : 260,
					toolbar : '#toolbarDemo2'
				}] ]
			});//表格渲染结束
			
			//异步请求商品类型下拉列表
			$.post("getPosition", function(res) {
				//console.log(res);
				for (var i = 0; i < res.length; i++) {
					$(".posiId").append('<option value="'+res[i].posiId+'">' + res[i].posiName + '</option>');
				}
				form.render('select');
			}, "json");
			//图片上传的代码--添加
			upload.render({
				elem : '#pictureFileAdd', //指定选择文件的容器
				url : 'imgUpload', //服务端的地址
				method : 'post',// 类型
				done : function(res, index, upload) {
					console.log(res);
					if (res.code == 0) {
						var imgUrl = JSON.parse(res.data);
						lujing = imgUrl.src
						$("#imgUrlAdd").val(lujing); //设置隐藏域的值
						//$("#imgShowAdd").attr("src","../"+imgUrl.src); //设置图片展示
						$("#imgShowAdd").attr("src", "showPic/" + lujing); //设置图片展示
					}
				}
			});
			//图片上传的代码--修改
			upload.render({
				elem : '#pictureFileUpdate', //指定选择文件的容器
				url : 'imgUpload', //服务端的地址
				method : 'post',// 类型
				done : function(res, index, upload) {
					console.log(res);
					if (res.code == 0) {
						var imgUrl = JSON.parse(res.data);
						lujing = imgUrl.src
						$("#imgUrlUpdate").val(lujing); //设置隐藏域的值
						//$("#imgShowAdd").attr("src","../"+imgUrl.src); //设置图片展示
						$("#imgShowUpdate").attr("src", "showPic/" + lujing); //设置图片展示
					}
				}
			});

			//监听事件--行内工具栏监听开始
			table.on('tool(test)', function(obj) {
				var data = obj.data;//当前行内数据
				switch (obj.event) {
				case 'delete':
					layer.confirm('真的删除行么', function(index) {
						//向服务端发送删除指令
						$.post("delPosition", {
							"posiId" : data.posiId
						}, function(res) {
							if (res.code == 0) {
								layer.msg("成功", {
									time : 2000
								//成功提示弹出时间
								}, function() {
									obj.del(); //删除对应行（tr）的DOM结构，并更新缓存
									layer.close(index);
									layer.closeAll();//关闭所有的弹窗
									table.reload('idTest', {})//表格重载
								});
							} else {
								layer.msg("底下有商品，不能进行删除", {
									time : 2000
								//成功提示弹出时间
								}, function() {
									layer.closeAll();//关闭所有的弹窗
								});
							}
						}, "json")
					});
					break;
				case 'update':
					//layer.msg('编辑');
					//弹窗
					layer.open({
						type : 1,
						content : $('#updDiv')
					});
					//数据回显
					form.val("updForm", data);
					obj.update({
						username : '123',
						title : 'xxx'
					});
					break;
				case 'cha':
					//layer.msg('编辑');
					//弹窗
					layer.open({
						type : 1,
						content : $('#updCha'),
						area : [ '800px', '500px' ]
					});
					table.render({
						elem : '#demo2',
						url : 'getPosiProduct?posiId=' + data.posiId,
						toolbar : '#toolbarDemo1',
						id : 'idTest2',
						cols : [ [ //表
						{
							field : 'proId',
							title : '产品Id',
							width : 180,
							sort : true,
							fixed : 'left'
						}, {
							field : 'proName',
							title : '产品名',
							width : 180
						}, {
							field : 'proUrl',
							title : '图片地址',
							width : 120,
							templet : function(d) {
								return '<img src="showPic/'+d.proUrl+'"/>'
							}
						}, {
							field : 'currentPrice',
							title : '打折价格',
							width : 100
						}, {
							title : '编辑',
							width : 250,
							toolbar : "#barDemo2",
							sort : true
						}

						] ]
					});//表格渲染结束
					//同步更新缓存对应的值
					obj.update({
						username : '123',
						title : 'xxx'
					});
					//数据回显
					form.val("updForm", data);
					break;
				
				}
			});//监听事件--行内工具栏监听结束
		
			//图片行内工具栏
			table.on('tool(chatab)', function(obj) { //注：tool是工具条事件名，test是table原始容器的属性 lay-filter="对应的值"
				var data = obj.data; //获得当前行数据
				var layEvent = obj.event; //获得 lay-event 对应的值
				var tr = obj.tr; //获得当前行 tr 的DOM对象

				if (layEvent === 'detail') { //查看
					//do somehing
				}  else if (layEvent === 'editTu') { //编辑
					//do something
					layer.open({
						type : 1,
						content : $('#updateFormTu'),
						area : [ '500px', '600px' ]
					//这里content是一个DOM，注意：最好该元素要存放在body最外层，否则可能被其它的相对元素所影响
					});
					form.val("updateFormTu", data);
					//同步更新缓存对应的值
					obj.update({
						username : '123',
						title : 'xxx'
					});
				}
			});
			//编辑
			form.on('submit(updateformDemoTu)', function(data) {
				//layer.msg(JSON.stringify(data.field));
				$.post("updatePros", data.field, function(res) {
					if (res.code == 0) {
						layer.msg("成功", {
							time : 1000
						}, function() {
							layer.closeAll();
							table.reload('idTest', {});
						})
					}
				}, 'json')
				return false;
			});
		});//脚本结束
	</script>
</body>
</html>